<template>
	<view class="page">
		<!-- 头部说明 -->
		<view class="header-info">
			<text class="title">一键发布</text>
			<text class="subtitle">选择模板，快速发布你的活动或动态</text>
		</view>

		<!-- 快速模板区域 -->
		<view class="template-section">
			<text class="section-title">活动模板</text>
			<scroll-view scroll-x="true" class="template-scroll" show-scrollbar="false">
				<view class="template-list">
					<view 
						class="template-card activity-template" 
						v-for="template in activityTemplates" 
						:key="template.id"
						@click="selectTemplate(template)"
					>
						<view class="template-header" :style="{ background: template.gradient }">
							<text class="template-name">{{ template.name }}</text>
							<text class="template-desc">{{ template.desc }}</text>
						</view>
						<view class="template-content">
							<view class="template-item">
								<text class="item-label">时间:</text>
								<text class="item-value">{{ template.time }}</text>
							</view>
							<view class="template-item">
								<text class="item-label">地点:</text>
								<text class="item-value">{{ template.location }}</text>
							</view>
							<view class="template-item">
								<text class="item-label">人数:</text>
								<text class="item-value">{{ template.maxPeople }}人</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 动态模板区域 -->
		<view class="template-section">
			<text class="section-title">动态模板</text>
			<view class="moment-templates">
				<view 
					class="moment-card" 
					v-for="template in momentTemplates" 
					:key="template.id"
					@click="selectMomentTemplate(template)"
				>
					<view class="moment-left">
						<view class="moment-icon" :style="{ background: template.color }">
							<text class="icon-text">{{ template.icon }}</text>
						</view>
					</view>
					<view class="moment-right">
						<text class="moment-title">{{ template.title }}</text>
						<text class="moment-content">{{ template.content }}</text>
						<view class="moment-tags">
							<text class="tag" v-for="tag in template.tags" :key="tag">#{{ tag }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 智能推荐 -->
		<view class="recommend-section">
			<view class="recommend-header">
				<text class="section-title">智能推荐</text>
				<text class="recommend-tip">基于你的兴趣为你推荐</text>
			</view>
			<view class="recommend-list">
				<view 
					class="recommend-item" 
					v-for="item in recommendItems" 
					:key="item.id"
					@click="quickPublish(item)"
				>
					<view class="recommend-icon">
						<image :src="item.icon" class="icon-img" />
					</view>
					<view class="recommend-info">
						<text class="recommend-title">{{ item.title }}</text>
						<text class="recommend-subtitle">{{ item.subtitle }}</text>
					</view>
					<view class="recommend-action">
						<text class="action-text">立即发布</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 自定义发布 -->
		<view class="custom-section">
			<text class="section-title">自定义发布</text>
			<view class="custom-options">
				<view class="custom-item" @click="createCustomActivity">
					<view class="custom-icon activity-icon">
						<image src="/static/svg/walking.svg" class="icon-img" />
					</view>
					<text class="custom-text">创建活动</text>
				</view>
				<view class="custom-item" @click="createCustomMoment">
					<view class="custom-icon moment-icon">
						<image src="/static/svg/camera.svg" class="icon-img" />
					</view>
					<text class="custom-text">发布动态</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

// 活动模板数据
const activityTemplates = ref([
	{
		id: 1,
		name: '周末聚餐',
		desc: '美食爱好者聚会',
		time: '周六 18:00',
		location: '市中心餐厅',
		maxPeople: 8,
		gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
	},
	{
		id: 2,
		name: '晨跑打卡',
		desc: '健康生活从运动开始',
		time: '每日 7:00',
		location: '城市公园',
		maxPeople: 15,
		gradient: 'linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%)'
	},
	{
		id: 3,
		name: '读书分享',
		desc: '知识的力量',
		time: '周日 14:00',
		location: '图书馆',
		maxPeople: 12,
		gradient: 'linear-gradient(135deg, #F093FB 0%, #F5576C 100%)'
	},
	{
		id: 4,
		name: '电影观影',
		desc: '一起看好电影',
		time: '周五 19:30',
		location: '影院',
		maxPeople: 6,
		gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
	}
])

// 动态模板数据
const momentTemplates = ref([
	{
		id: 1,
		title: '美好的一天',
		content: '今天天气真好，心情也特别棒！分享一下今天的美好时刻 ✨',
		icon: '☀️',
		color: '#FFD93D',
		tags: ['好心情', '阳光', '美好生活']
	},
	{
		id: 2,
		title: '学习打卡',
		content: '今天又学到了新知识，成长的感觉真好！坚持每天进步一点点 📚',
		icon: '📖',
		color: '#6BCF7F',
		tags: ['学习', '成长', '坚持']
	},
	{
		id: 3,
		title: '运动健身',
		content: '运动完的感觉太棒了！流汗的感觉让我觉得很充实 💪',
		icon: '💪',
		color: '#4ECDC4',
		tags: ['健身', '运动', '活力']
	},
	{
		id: 4,
		title: '美食分享',
		content: '发现了一家超好吃的餐厅，必须分享给大家！生活需要仪式感 🍽️',
		icon: '🍽️',
		color: '#FF6B6B',
		tags: ['美食', '发现', '分享']
	}
])

// 智能推荐数据
const recommendItems = ref([
	{
		id: 1,
		title: '发起周末户外活动',
		subtitle: '基于你的运动兴趣推荐',
		icon: '/static/svg/walking.svg'
	},
	{
		id: 2,
		title: '分享学习心得',
		subtitle: '你最近很活跃于学习话题',
		icon: '/static/svg/category-growth.svg'
	},
	{
		id: 3,
		title: '美食探店打卡',
		subtitle: '推荐附近的热门餐厅',
		icon: '/static/svg/gourds.svg'
	}
])

// 选择活动模板
const selectTemplate = (template) => {
	uni.navigateTo({
		url: `/pages/publish/activity?template=${JSON.stringify(template)}`
	})
}

// 选择动态模板
const selectMomentTemplate = (template) => {
	uni.navigateTo({
		url: `/pages/publish/moment?template=${JSON.stringify(template)}`
	})
}

// 快速发布推荐项
const quickPublish = (item) => {
	uni.showLoading({ title: '生成中...' })
	
	// 模拟AI生成内容
	setTimeout(() => {
		uni.hideLoading()
		uni.showModal({
			title: '确认发布',
			content: `即将为你发布"${item.title}"，内容将基于你的兴趣智能生成`,
			success: (res) => {
				if (res.confirm) {
					// 执行发布
					uni.showLoading({ title: '发布中...' })
					setTimeout(() => {
						uni.hideLoading()
						uni.showToast({ 
							title: '发布成功', 
							icon: 'success',
							success: () => {
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)
							}
						})
					}, 2000)
				}
			}
		})
	}, 1500)
}

// 创建自定义活动
const createCustomActivity = () => {
	uni.navigateTo({
		url: '/pages/publish/activity'
	})
}

// 创建自定义动态
const createCustomMoment = () => {
	uni.navigateTo({
		url: '/pages/publish/moment'
	})
}
</script>

<style scoped>
.page {
	min-height: 100vh;
	background: #f8f9fa;
	padding: 20px;
}

.header-info {
	text-align: center;
	margin-bottom: 30px;
}

.title {
	font-size: 28px;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 8px;
}

.subtitle {
	font-size: 16px;
	color: #666;
	display: block;
}

.template-section {
	margin-bottom: 30px;
}

.section-title {
	font-size: 20px;
	font-weight: 600;
	color: #333;
	display: block;
	margin-bottom: 15px;
}

.template-scroll {
	white-space: nowrap;
}

.template-list {
	display: flex;
	gap: 15px;
	padding-bottom: 10px;
}

.template-card {
	width: 280px;
	background: white;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.template-header {
	padding: 20px;
	color: white;
}

.template-name {
	font-size: 18px;
	font-weight: bold;
	display: block;
	margin-bottom: 5px;
}

.template-desc {
	font-size: 14px;
	opacity: 0.9;
	display: block;
}

.template-content {
	padding: 15px 20px 20px;
}

.template-item {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}

.template-item:last-child {
	margin-bottom: 0;
}

.item-label {
	font-size: 14px;
	color: #666;
	width: 50px;
}

.item-value {
	font-size: 14px;
	color: #333;
	font-weight: 500;
}

.moment-templates {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.moment-card {
	display: flex;
	background: white;
	border-radius: 16px;
	padding: 20px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.moment-left {
	margin-right: 15px;
}

.moment-icon {
	width: 50px;
	height: 50px;
	border-radius: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.icon-text {
	font-size: 24px;
}

.moment-right {
	flex: 1;
}

.moment-title {
	font-size: 16px;
	font-weight: 600;
	color: #333;
	display: block;
	margin-bottom: 5px;
}

.moment-content {
	font-size: 14px;
	color: #666;
	line-height: 1.4;
	display: block;
	margin-bottom: 10px;
}

.moment-tags {
	display: flex;
	gap: 8px;
}

.tag {
	font-size: 12px;
	color: #667eea;
	background: rgba(102, 126, 234, 0.1);
	padding: 4px 8px;
	border-radius: 12px;
}

.recommend-section {
	margin-bottom: 30px;
}

.recommend-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15px;
}

.recommend-tip {
	font-size: 14px;
	color: #999;
}

.recommend-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.recommend-item {
	display: flex;
	align-items: center;
	background: white;
	border-radius: 12px;
	padding: 15px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.recommend-icon {
	width: 40px;
	height: 40px;
	border-radius: 20px;
	background: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 12px;
}

.icon-img {
	width: 20px;
	height: 20px;
	filter: opacity(0.7);
}

.recommend-info {
	flex: 1;
}

.recommend-title {
	font-size: 16px;
	font-weight: 500;
	color: #333;
	display: block;
	margin-bottom: 3px;
}

.recommend-subtitle {
	font-size: 14px;
	color: #666;
	display: block;
}

.recommend-action {
	padding: 8px 16px;
	background: rgba(102, 126, 234, 0.1);
	border-radius: 20px;
}

.action-text {
	font-size: 14px;
	color: #667eea;
	font-weight: 500;
}

.custom-section {
	margin-bottom: 30px;
}

.custom-options {
	display: flex;
	gap: 15px;
}

.custom-item {
	flex: 1;
	background: white;
	border-radius: 16px;
	padding: 30px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.custom-icon {
	width: 60px;
	height: 60px;
	border-radius: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 15px;
}

.activity-icon {
	background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);
}

.moment-icon {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.custom-icon .icon-img {
	width: 28px;
	height: 28px;
	filter: brightness(0) invert(1);
}

.custom-text {
	font-size: 16px;
	font-weight: 500;
	color: #333;
}
</style>
